import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

import {
  TextInput,
  Button,
  Title,
  Dialog,
  Paragraph,
  Portal,
} from 'react-native-paper';
import request from '../../utils/request';
// import {createStackNavigator} from '@react-navigation/stack';

export default class login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '17111652110',
      password: '123456',
      visible: false,
      message: '',
      loading: false,
      modalVisible: false,
    };
  }

  _userNameChangeHandler = text => {
    this.setState({
      username: text,
    });
  };

  _passwordChangeHandler = text => {
    this.setState({
      password: text,
    });
  };

  _dologin = () => {
    this.setState({loading: true});
    request({
      url: '/user/login',
      method: 'post',
      data: {
        userId: this.state.username,
        password: this.state.password,
      },
    })
      .then(data => {
        if (data.result === true) {
          console.log(data);

          AsyncStorage.setItem('userId', '17111652110').then(() => {
            AsyncStorage.setItem('user', JSON.stringify(data.obj)).then(() => {
              this.setState({loading: false});
              this.props.navigation.navigate('北城之音a');
            });
          });
        } else {
          this.setState({
            message: data.msg,
            visible: true,
            loading: false,
          });
        }
      })
      .catch(() => {
        this.setState({
          message: '登录超时，请检查网络',
          visible: true,
          loading: false,
        });
      });
  };

  _hideDialog = () => {
    this.setState({visible: false});
  };

  render() {
    return (
      <View>
        <View>
          <Text style={styles.title1}> 欢迎使用 </Text>
          <Text style={styles.title2}> 北 城 之 音 </Text>
        </View>

        <View style={styles.loginForm}>
          <Text>您好，请使用校园卡账户登录</Text>

          <TextInput
            mode="outlined"
            label="校园卡号"
            onChangeText={this._userNameChangeHandler}
            value={this.state.username}
          />

          <TextInput
            mode="outlined"
            secureTextEntry={true}
            label="密码"
            onChangeText={this._passwordChangeHandler}
            value={this.state.password}
          />
        </View>

        <View style={styles.buttonArea}>
          <Button
            loading={this.state.loading}
            icon="account"
            mode="contained"
            onPress={this._dologin}>
            登录
          </Button>
        </View>

        <View>
          <Text
            style={styles.forget}
            onPress={() => {
              this.setState({message: '忘记密码？不予找回！', visible: true});
            }}>
            忘记密码?
          </Text>
        </View>
        <Portal>
          <Dialog visible={this.state.visible} onDismiss={this._hideDialog}>
            <Dialog.Title>登录遇到问题</Dialog.Title>
            <Dialog.Content>
              <Paragraph>{this.state.message}</Paragraph>
            </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={this._hideDialog}>好的</Button>
            </Dialog.Actions>
          </Dialog>
        </Portal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title1: {
    marginTop: 15,
    fontSize: 20,
    color: 'black',
  },

  title2: {
    textAlign: 'center',
    color: '#6200ee',
    fontSize: 35,
  },

  loginForm: {
    marginTop: 25,
    marginBottom: 15,
    marginLeft: 10,
    marginRight: 10,
  },

  buttonArea: {
    margin: 10,
  },

  forget: {
    textAlign: 'right',
    marginRight: 20,
    marginTop: 10,
  },
});
